import React from 'react';
import {Link, Outlet, useNavigate} from 'react-router-dom';

export default function News() {
	const navigate = useNavigate();

	const [arrs] = React.useState([
		{id: '001', title: '代码', content: '小吴会写代码'},
		{id: '002', title: '篮球', content: '小吴会打篮球'},
		{id: '003', title: '跳', content: '小吴会跳鸡你太美'},
	]);

	/* 目前navigate只支持state传参 */
	function showDetail(item) {
		// 跳转到详情页并带有参数
		navigate('details', {
			replace: false,
			state: {
				id: item.id,
				title: item.title,
				content: item.content,
			},
		});
	}

	return (
		<div>
			<ul>
				{arrs.map(item => {
					return (
						<li key={item.id}>
							<Link
								to="details"
								state={{
									id: item.id,
									title: item.title,
									content: item.content,
								}}>
								{item.title}
							</Link>
							<button
								onClick={() => {
									showDetail(item);
								}}>
								查看详情
							</button>
						</li>
					);
				})}
			</ul>
			<Outlet></Outlet>
		</div>
	);
}
